<template>
    <view class="search-container">
        <!-- 搜索框 -->
        <view class="search-box">
            <view class="search-input-wrapper">
                <text class="search-icon">🔍</text>
                <input class="search-input" v-model="searchKeyword" placeholder="请输入城市名称" @input="onSearchInput"
                    confirm-type="search" />
                <text v-if="searchKeyword" class="clear-btn" @click="clearSearch">✕</text>
            </view>
        </view>

        <!-- 搜索结果 -->
        <view class="search-results" v-if="searchResults.length > 0">
            <view class="city-item" v-for="(city, index) in searchResults" :key="index" @click="selectCity(city)">
                <view class="city-info">
                    <text class="city-name">{{ city.name }}</text>
                    <text class="city-province">{{ city.province }}</text>
                </view>
                <text class="arrow">></text>
            </view>
        </view>

        <!-- 热门城市 -->
        <view class="hot-cities" v-else>
            <view class="section-title">热门城市</view>
            <view class="hot-cities-grid">
                <view class="hot-city-item" v-for="(city, index) in hotCities" :key="index" @click="selectCity(city)">
                    {{ city.name }}
                </view>
            </view>
        </view>

        <!-- 无搜索结果提示 -->
        <view class="no-result" v-if="searchKeyword && searchResults.length === 0">
            <text>未找到相关城市</text>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            searchKeyword: '',
            searchResults: [],
            hotCities: [
                { name: '北京', province: '北京市', code: '110000' },
                { name: '上海', province: '上海市', code: '310000' },
                { name: '广州', province: '广东省', code: '440100' },
                { name: '深圳', province: '广东省', code: '440300' },
                { name: '杭州', province: '浙江省', code: '330100' },
                { name: '南京', province: '江苏省', code: '320100' },
                { name: '武汉', province: '湖北省', code: '420100' },
                { name: '成都', province: '四川省', code: '510100' },
                { name: '西安', province: '陕西省', code: '610100' },
                { name: '重庆', province: '重庆市', code: '500000' },
                { name: '青岛', province: '山东省', code: '370200' }
            ],
            allCities: [
                { name: '北京', province: '北京市', code: '110000' },
                { name: '上海', province: '上海市', code: '310000' },
                { name: '广州', province: '广东省', code: '440100' },
                { name: '深圳', province: '广东省', code: '440300' },
                { name: '杭州', province: '浙江省', code: '330100' },
                { name: '南京', province: '江苏省', code: '320100' },
                { name: '武汉', province: '湖北省', code: '420100' },
                { name: '成都', province: '四川省', code: '510100' },
                { name: '西安', province: '陕西省', code: '610100' },
                { name: '重庆', province: '重庆市', code: '500000' },
                { name: '青岛', province: '山东省', code: '370200' },
                { name: '大连', province: '辽宁省', code: '210200' },
                { name: '厦门', province: '福建省', code: '350200' },
                { name: '苏州', province: '江苏省', code: '320500' },
                { name: '无锡', province: '江苏省', code: '320200' },
                { name: '宁波', province: '浙江省', code: '330200' },
                { name: '长沙', province: '湖南省', code: '430100' },
                { name: '郑州', province: '河南省', code: '410100' },
                { name: '济南', province: '山东省', code: '370100' },
                { name: '哈尔滨', province: '黑龙江省', code: '230100' },
                { name: '沈阳', province: '辽宁省', code: '210100' },
                { name: '长春', province: '吉林省', code: '220100' },
                { name: '石家庄', province: '河北省', code: '130100' },
                { name: '太原', province: '山西省', code: '140100' },
                { name: '呼和浩特', province: '内蒙古自治区', code: '150100' },
                { name: '合肥', province: '安徽省', code: '340100' },
                { name: '福州', province: '福建省', code: '350100' },
                { name: '南昌', province: '江西省', code: '360100' },
                { name: '南宁', province: '广西壮族自治区', code: '450100' },
                { name: '海口', province: '海南省', code: '460100' },
                { name: '贵阳', province: '贵州省', code: '520100' },
                { name: '昆明', province: '云南省', code: '530100' },
                { name: '拉萨', province: '西藏自治区', code: '540100' },
                { name: '兰州', province: '甘肃省', code: '620100' },
                { name: '西宁', province: '青海省', code: '630100' },
                { name: '银川', province: '宁夏回族自治区', code: '640100' },
                { name: '乌鲁木齐', province: '新疆维吾尔自治区', code: '650100' }
            ]
        }
    },
    methods: {
        onSearchInput() {
            if (this.searchKeyword.trim()) {
                this.searchCities();
            } else {
                this.searchResults = [];
            }
        },

        searchCities() {
            const keyword = this.searchKeyword.trim();
            if (!keyword) {
                this.searchResults = [];
                return;
            }

            this.searchResults = this.allCities.filter(city =>
                city.name.includes(keyword) || city.province.includes(keyword)
            ).slice(0, 20); // 限制搜索结果数量
        },

        clearSearch() {
            this.searchKeyword = '';
            this.searchResults = [];
        },

        selectCity(city) {
            // 将选中的城市信息传递回主页面
            const pages = getCurrentPages();
            const prevPage = pages[pages.length - 2];

            if (prevPage) {
                prevPage.$vm.updateCity(city);
            }

            uni.navigateBack();
        }
    }
}
</script>

<style scoped>
.search-container {
    padding: 20rpx;
    background-color: #f5f5f5;
    min-height: 100vh;
}

.search-box {
    margin-bottom: 30rpx;
}

.search-input-wrapper {
    display: flex;
    align-items: center;
    background-color: #fff;
    border-radius: 50rpx;
    padding: 20rpx 30rpx;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.search-icon {
    font-size: 32rpx;
    margin-right: 20rpx;
    color: #999;
}

.search-input {
    flex: 1;
    font-size: 28rpx;
    color: #333;
}

.clear-btn {
    font-size: 28rpx;
    color: #999;
    padding: 10rpx;
}

.search-results {
    background-color: #fff;
    border-radius: 20rpx;
    overflow: hidden;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.city-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30rpx;
    border-bottom: 1rpx solid #f0f0f0;
}

.city-item:last-child {
    border-bottom: none;
}

.city-info {
    flex: 1;
}

.city-name {
    font-size: 32rpx;
    color: #333;
    font-weight: 500;
    display: block;
    margin-bottom: 8rpx;
}

.city-province {
    font-size: 24rpx;
    color: #999;
}

.arrow {
    font-size: 28rpx;
    color: #ccc;
}

.hot-cities {
    background-color: #fff;
    border-radius: 20rpx;
    padding: 30rpx;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.section-title {
    font-size: 32rpx;
    color: #333;
    font-weight: 600;
    margin-bottom: 30rpx;
}

.hot-cities-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20rpx;
}

.hot-city-item {
    background-color: #f8f9fa;
    padding: 20rpx 30rpx;
    border-radius: 50rpx;
    font-size: 28rpx;
    color: #333;
    border: 1rpx solid #e9ecef;
}

.hot-city-item:active {
    background-color: #e9ecef;
}

.no-result {
    text-align: center;
    padding: 100rpx 0;
    color: #999;
    font-size: 28rpx;
}

/* 微信小程序适配 */
/* #ifdef MP-WEIXIN */
.search-input {
    height: 60rpx;
    line-height: 60rpx;
}

/* #endif */

/* H5适配 */
/* #ifdef H5 */
.search-input {
    height: 60rpx;
    line-height: 60rpx;
}

/* #endif */
</style>